<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <div th:replace="~{layout :: body(content=~{::content})}">
        <div th:fragment="content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>欢迎使用安全认证系统</h1>
            </div>
            
            <!-- 主横幅 -->
            <div class="card bg-gradient mb-4">
                <div class="card-body p-5">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h1 class="display-4 fw-bold mb-3">安全认证 <span style="color: var(--primary-color);">更简单</span></h1>
                            <p class="lead mb-4">这是一个功能完善的Spring Security示例应用，提供用户认证和基于角色的权限控制。</p>
                            
                            <div sec:authorize="!isAuthenticated()" class="d-flex gap-3 mt-4">
                                <a th:href="@{/login}" class="btn btn-primary btn-lg px-4 py-2">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>立即登录
                                </a>
                                <a th:href="@{/register}" class="btn btn-outline-primary btn-lg px-4 py-2">
                                    <i class="bi bi-person-plus me-2"></i>注册账号
                                </a>
                            </div>
                            
                            <div sec:authorize="isAuthenticated()" class="mt-4">
                                <p class="lead mb-3">
                                    欢迎回来，<strong style="color: var(--primary-color);" sec:authentication="name"></strong>！
                                </p>
                                <div class="d-flex gap-3">
                                    <a th:href="@{/user/dashboard}" class="btn btn-primary px-4 py-2" sec:authorize="hasRole('USER')">
                                        <i class="bi bi-speedometer2 me-2"></i>前往用户仪表盘
                                    </a>
                                    <a th:href="@{/admin/dashboard}" class="btn btn-danger px-4 py-2" sec:authorize="hasRole('ADMIN')">
                                        <i class="bi bi-gear me-2"></i>前往管理控制台
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 d-flex justify-content-center d-none d-lg-flex">
                            <div class="position-relative" style="width: 260px; height: 260px;">
                                <div class="position-absolute top-50 start-50 translate-middle">
                                    <div class="rounded-circle bg-light d-flex align-items-center justify-content-center" 
                                         style="width: 220px; height: 220px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
                                        <i class="bi bi-shield-lock text-primary" style="font-size: 6rem;"></i>
                                    </div>
                                </div>
                                <div class="position-absolute" style="top: 0; right: 0;">
                                    <div class="rounded-circle bg-success d-flex align-items-center justify-content-center" 
                                         style="width: 60px; height: 60px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
                                        <i class="bi bi-check-lg text-white" style="font-size: 2rem;"></i>
                                    </div>
                                </div>
                                <div class="position-absolute" style="bottom: 0; left: 0;">
                                    <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center" 
                                         style="width: 80px; height: 80px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);">
                                        <i class="bi bi-person-fill text-white" style="font-size: 2.5rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 特性卡片 -->
            <div class="row g-4 mb-5">
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="feature-icon bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                                 style="width: 80px; height: 80px;">
                                <i class="bi bi-person-check text-primary" style="font-size: 2.5rem;"></i>
                            </div>
                            <h3 class="card-title h5 fw-bold">用户认证</h3>
                            <p class="card-text">安全可靠的用户认证系统，支持注册、登录和"记住我"功能，使用Spring Security提供强大的身份验证。</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="feature-icon bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                                 style="width: 80px; height: 80px;">
                                <i class="bi bi-key text-success" style="font-size: 2.5rem;"></i>
                            </div>
                            <h3 class="card-title h5 fw-bold">权限控制</h3>
                            <p class="card-text">基于角色的精细访问控制系统，确保用户只能访问其权限范围内的资源和功能，轻松管理权限。</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="feature-icon bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                                 style="width: 80px; height: 80px;">
                                <i class="bi bi-layout-text-window text-info" style="font-size: 2.5rem;"></i>
                            </div>
                            <h3 class="card-title h5 fw-bold">响应式设计</h3>
                            <p class="card-text">美观且响应式的用户界面，基于Bootstrap 5构建，支持各种设备和屏幕尺寸，提供出色的用户体验。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div sec:authorize="!isAuthenticated()" class="alert alert-light border-0 shadow-sm p-4 text-center">
                <p class="mb-0"><i class="bi bi-info-circle me-2"></i>默认用户 - 用户名: <strong>user</strong>, 密码: <strong>password</strong> | 管理员 - 用户名: <strong>admin</strong>, 密码: <strong>admin</strong></p>
            </div>
        </div>
    </div>
</body>
</html> 